<template>
  <!-- 抖音商品详情 -->
  <div class="p-2" v-loading="loading">
    <div class="mb-[10px]">
      <el-card>
        <template v-slot:header>
          <el-button plain icon="Back" @click="close" style="border: none; font-size: 18px;">关 闭</el-button>
        </template>
        <el-row style="padding: 0 20px;">
          <el-col :span="6">
            <!-- <el-tabs v-model="activeName">
              <el-tab-pane label="轮播图" name="slideshow">
                <el-carousel ref="slideshowRef" trigger="click" indicator-position="none" height="404px">
                  <el-carousel-item v-for="item in slideshowList" :key="item" style="background-color: #fff;">
                    <el-image style="width: 100%; height: 404px;"
                      :src="item " fit="contain" />
                  </el-carousel-item>
                </el-carousel>
                <el-scrollbar>
                  <div class="scrollbar-flex-content">
                    <el-image v-for="(item, index) in slideshowList" :key="item" class="scrollbar-demo-item"
                      :src="item " fit="contain"
                      @click="slideshowClick(index)" />
                  </div>
                </el-scrollbar>
              </el-tab-pane>
              <el-tab-pane label="详情图" name="intro">
                <el-carousel ref="introRef" trigger="click" indicator-position="none" height="404px">
                  <el-carousel-item v-for="item in introList" :key="item" style="background-color: #fff;">
                    <el-image style="width: 100%; height: 404px;"
                      :src="item " fit="contain" />
                  </el-carousel-item>
                </el-carousel>
                <el-scrollbar>
                  <div class="scrollbar-flex-content">
                    <el-image v-for="(item, index) in introList" :key="item" class="scrollbar-demo-item"
                      :src="item " fit="contain"
                      @click="introClick(index)" />
                  </div>
                </el-scrollbar>
              </el-tab-pane>
            </el-tabs> -->
            <el-carousel ref="slideshowRef" trigger="click" indicator-position="none" height="404px"
              style="margin-top: 20px;">
              <el-carousel-item v-for="item in slideshowList" :key="item" style="background-color: #fff;">
                <el-image style="width: 100%; height: 404px;"
                  :src="item " fit="contain" />
              </el-carousel-item>
            </el-carousel>
            <el-row>
              <el-scrollbar>
                <div class="scrollbar-flex-content">
                  <el-image v-for="(item, index) in slideshowList" :key="item" class="scrollbar-demo-item"
                    :src="item " fit="contain"
                    @click="slideshowClick(index)" />
                </div>
              </el-scrollbar>
            </el-row>
          </el-col>
          <el-col :span="2">
            <div style=" width: 30%; height: 100%; border-right: 1px solid #dddddd;"></div>
          </el-col>
          <el-col :span="15">
            <el-row>
              <el-col :span="13" class="sin-line">
                <el-tooltip content="复制商品名" placement="top">
                  <el-button link icon="CopyDocument" class="iconSty" @click="copyText(tiktokInfo?.name)"></el-button>
                </el-tooltip>
                <el-tooltip :content="tiktokInfo?.name" placement="top">
                  <span class="lioneuos">{{ tiktokInfo?.name }}</span>
                </el-tooltip>
              </el-col>
              <el-col :span="10" :offset="1" class="sin-line">
                <el-tooltip content="复制店铺名" placement="top">
                  <el-button link icon="Shop" class="iconSty" @click="copyText(tiktokInfo?.shopName)"></el-button>
                </el-tooltip>
                <el-tooltip :content="tiktokInfo?.shopName" placement="top">
                  <span class="lioneuos">{{ tiktokInfo?.shopName }}</span>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-row class="goodsCard" justify="space-evenly">
              <el-col :span="10" class="lioneuos">
                <div>日常价&ensp;<span style="font-size: 28px; font-weight: 700; color: #fa6b7e;">￥{{
                  tiktokInfo?.price }}</span></div>
                <div>佣金率&ensp;<span style="font-weight: 700; color: #fa6b7e;">{{
                  tiktokInfo?.commissionRate }}%&#8197;赚￥{{ tiktokInfo?.estimatedCommissionFee }}元</span></div>
                <div>服务费&ensp;<span style="font-weight: 700; color: #fa6b7e;">{{
                  tiktokInfo?.serviceRate }}%&#8197;赚￥{{ tiktokInfo?.estimatedServiceFee }}元</span></div>
                <div>时&emsp;间&ensp;<span>起：{{ tiktokInfo?.promoteStartDate }}&#8197;止：{{
                  tiktokInfo?.promoteEndDate }}</span></div>
                <div>销&emsp;量&ensp;<span>30天&#8197;{{ tiktokInfo?.orderNum }}件&emsp;&emsp;总销量&#8197;{{
                  tiktokInfo?.saleCount
                }}件</span></div>
                <div>浏览量&ensp;<span>30天&#8197;{{ tiktokInfo?.viewNum }}次</span></div>
                <div>达人数&ensp;<span>30天&#8197;{{ tiktokInfo?.kolNum }}人</span></div>
              </el-col>
              <el-col :span="8" align="center">
                <el-image style="height: 240px"
                  :src="tiktokInfo?.cover "
                  :preview-src-list="[tiktokInfo?.cover as string]" fit="contain" />
              </el-col>
            </el-row>
            <el-row class="statistics" justify="space-evenly">
              <el-col :span="3" align="center" style="line-height: 35px;">抖音官方</el-col>
              <el-col :span="3" align="center">
                <div>{{ tiktokInfo?.orderPayAmount }}元</div>
                <div>付款金额</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>{{ tiktokInfo?.orderPayNum }}</div>
                <div>付款笔数</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>{{ tiktokInfo?.orderSettleAmount }}元</div>
                <div>结算金额</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>{{ tiktokInfo?.orderSettleCnt }}</div>
                <div>结算笔数</div>
              </el-col>
              <el-col :span="4" align="center">
                <div>{{ tiktokInfo?.settleServiceFee }}元</div>
                <div>结算服务费收入</div>
              </el-col>
            </el-row>
            <el-row class="statistics" justify="space-evenly">
              <el-col :span="3" align="center" style="line-height: 35px;">系统统计</el-col>
              <el-col :span="3" align="center">
                <div>{{ tiktokInfo?.statOrderPayAmount }}元</div>
                <div>付款金额</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>{{ tiktokInfo?.statOrderPayAuthorNumber }}</div>
                <div>推广达人数</div>
              </el-col>
              <el-col :span="3" />
              <el-col :span="3" />
              <el-col :span="4" />
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="mb-[10px]">
      <el-card>
        <el-tabs v-model="tabsName">
          <el-tab-pane v-if="introList?.length !== 0" label="商品详情" name="goodsIntro">
            <div class="p-2">
              <el-card class="mb-3" shadow="never" align="center">
                <div class="demo-image__lazy">
                  <el-image v-for="url in introList" :key="url" :src="url" />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="materialId" label="素材详情" name="materialIntro">
            <detailsMaterial :id="materialId" flag="1" />
          </el-tab-pane>
          <el-tab-pane v-if="materialId" label="创意灵感" name="originality">
            <div class="p-2">
              <el-card class="mb-3" shadow="never" v-if="queryParams?.titles[0]">
                <!-- 素材图片 -->
                <template v-slot:header>
                  <div class="clearfix">
                    素材标题
                  </div>
                </template>
                <!-- 素材图片内容 -->
                <el-row :gutter="30">
                  <el-col :span="6" v-for="item in queryParams.titles" :key="item">
                    <el-row align="middle" class="clearfix_card">
                      <p class="mu-row" style="width: 77%;">{{ item }}</p>
                      <el-button style="margin-left: 5%;" round @click="copyText(item)">复制</el-button>
                    </el-row>
                  </el-col>
                </el-row>
              </el-card>
              <el-card class="mb-3" shadow="never" v-if="queryParams?.spokenLines[0]">
                <template v-slot:header>
                  <div class="clearfix">
                    口播台词
                  </div>
                </template>
                <el-row :gutter="30">
                  <el-col :span="6" v-for="item in queryParams.spokenLines" :key="item">
                    <el-row align="middle" class="clearfix_card">
                      <p class="mu-row" style="width: 77%;">{{ item }}</p>
                      <el-button style="margin-left: 5%;" round @click="copyText(item)">复制</el-button>
                    </el-row>
                  </el-col>
                </el-row>
              </el-card>
              <el-card class="mb-3" shadow="never" v-if="queryParams.sellingPoint">
                <template v-slot:header>
                  <div class="clearfix">
                    商品卖点
                  </div>
                </template>
                <el-row :gutter="30">
                  <el-col :span="6">
                    <el-row align="middle" class="clearfix_card">
                      <p class="mu-row" style="width: 77%;" v-html="queryParams.sellingPoint.replace(/\n/g, '<br/>')"></p>
                      <el-button style="margin-left: 5%;" round @click="copyText(queryParams.sellingPoint)">复制</el-button>
                    </el-row>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="DetailTiktok">
import { TiktokInfo } from '@/api/operates/tiktok/types';
import { getTiktok } from '@/api/operates/tiktok/index';
import { copyText } from '@/utils/copyText';
import { getMaterial } from '@/api/operates/material/index';
import { MaterialForm } from '@/api/operates/material/types';
import DetailsMaterial from "@/views/operates/material/subpage/detailsMaterial.vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取实例
const router = useRouter();
const route = useRoute()
// 解构赋值
let id = route.query.id
watch(
  () => route.query.id,
  (val, old) => {
    id = val
    getInfo();
    tabsName.value = 'goodsIntro'
  },
  // { immediate: true }
)

const loading = ref(true)
// 抖音商品详情
const tiktokInfo = ref<TiktokInfo>();
const materialId = ref<number>(0)

// 图片
const activeName = ref('slideshow')
const slideshowRef = ref<any>()
const slideshowList = ref<string[]>()
const introRef = ref<any>()
const introList = ref<string[]>()

// 详情切换(商品/素材/创意灵感)
const tabsName = ref('goodsIntro')

//
const queryParams = ref<MaterialForm>({
  cover: '',
  type: '',
  titles: [],
  spokenLines: [],
  sort: 0,
  sellingPoint: '',
})

/**
 * 获取抖音商品详情
 */
const getInfo = async () => {
  if (id) {
    loading.value = true;
    const res = await getTiktok(id as string | number);
    tiktokInfo.value = res.data;
    slideshowList.value = tiktokInfo.value.slideshow.split(",");
    introList.value = tiktokInfo.value.intro.split(",");
    materialId.value = tiktokInfo.value.materialId;
    if (tiktokInfo.value.materialId) {
      const { data } = await getMaterial(tiktokInfo.value.materialId);
      queryParams.value = data
    }
    loading.value = false;
  }
}

/**
 * 轮播图点击切换
 * @param index 
 */
const slideshowClick = (index: number) => {
  slideshowRef.value?.setActiveItem(index)
}
/**
 * 详情图点击切换
 * @param index 
 */
const introClick = (index: number) => {
  introRef.value?.setActiveItem(index)
}

const auditStatusFilters = (val?: number) => {
  if (val === 0) {
    return '待审核'
  } else if (val === 1) {
    return '审核通过'
  } else if (val === 2) {
    return '审核拒绝'
  } else if (val === 3) {
    return '重新报名'
  } else if (val === 4) {
    return '未知状态'
  } else if (val === 5) {
    return '商家取消'
  }
}

const enableFilters = (val?: number) => {
  if (val === 0) {
    return '下架'
  } else if (val === 1) {
    return '上架'
  }
}

/**
 * 关闭
 */
const close = () => {
  proxy?.$tab.closeOpenPage();
  router.push({ name: "Tiktok" });
}

onMounted(() => {
  getInfo()
})

// onUpdated(() => {
//   getInfo();
//   tabsName.value = 'goodsIntro'
// })
</script>

<style scoped>
/* 滚动条 */
.scrollbar-flex-content {
  display: flex;
  margin-top: 30px;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  height: 100px;
  margin: 0 10px 15px 0;
  text-align: center;
}

/* 文本样式 */
.lioneuos {
  line-height: 35px;
  font-family: 楷体;
  font-size: 20px;
}

/* 商品和店铺名前图标 */
.iconSty {
  font-size: 18px;
  padding-bottom: 5px;
}

/* 商品卡片 */
.goodsCard {
  width: 100%;
  margin-top: 20px;
  padding: 30px 0;
  background-color: #f7f8fc;
  border-radius: 30px;
}

/* 数据统计 */
.statistics {
  width: 100%;
  margin-top: 30px;
  padding-bottom: 20px;
  font-family: 楷体;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
}

/* 商品详情文本 */
.text_label {
  display: inline-block;
  width: 80px;
  vertical-align: top;
  text-align-last: justify;
}

.text_value {
  display: inline-block;
  width: 75%;
}

/* 商品详情图 */
.demo-image__lazy .el-image {
  display: block;
  width: 60%;
}

/* 创意灵感 */
.clearfix {
  font-size: 17px;
  font-weight: 600;
}

.clearfix_card {
  height: 113px;
  margin: 10px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

/* 单行省略 */
.sin-line {
  /* 第一步：让文字强制一行显示 */
  white-space: nowrap;
  /* 第二步：溢出隐藏 */
  overflow: hidden;
  /* 第三步：溢出的内容省略号显示 */
  text-overflow: ellipsis;
}

/* 多行省略 */
.mu-row {
  /* 允许单词内换行 */
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 开启盒子的弹性布局 */
  display: -webkit-box;
  /* 控制第几行出现省略号 */
  -webkit-line-clamp: 3;
  /* 设置子元素从上向下垂直排列 */
  -webkit-box-orient: vertical;
}
</style>